<template>
  <common-page title="详情">
      <el-button slot="header" @click="backTask">返回</el-button>
    <div class="row-division-18"></div>
      <div class="traceabilityReport-wrap" slot="content">
        <el-row :gutter="12">
          <el-col :span="8">
            <div class="row-division-18"></div>
            <div class="common-column-wrap  top">
              <div class="common-block-wrap" style="height: 244px;">
                <title-card title="账号IP画像">
                    <base-chart  slot="content" :option="columnOption1"></base-chart>
                </title-card>
              </div>
              <div class="row-division-18"></div>
              <div class="common-block-wrap" style="height: 244px">
                <title-card title="事件画像">
                  <base-chart slot="content" :option="columnOption2"></base-chart>
                </title-card>
              </div>
            </div>
          </el-col>
          <div class="row-division-18"></div>
        <el-col :span="16">
          <div class="common-column-wrap top">
            <div class="common-block-wrap" style="height: 500px;padding: 0 12px">
              <title-card title="接口画像">
                <base-chart slot="content" :option="columnOption3"></base-chart>
              </title-card>
            </div>
          </div>
        </el-col>
      </el-row>
        <div class="row-division-18"></div>
        <el-row :gutter="12">
           <el-col :span="24">
              <div class="common-column-wrap chart">
                <div class="common-block-wrap">
                  <title-card title="事件明细">
                    <div slot="content" class="chart-inside-wrap">
                      <el-table
                        height="100%" class="common-table-wrap"
                        :stripe="true"
                        :data="option"
                      >
                        <el-table-column prop="address" label="访问源IP"></el-table-column>
                        <el-table-column prop="clueData" label="线索数据" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="createTime" label="事件时间"></el-table-column>
                        <el-table-column prop="eventName" label="事件名称" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="request" label="请求体" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="response" label="响应体" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="apiUrl" label="URL"  show-overflow-tooltip></el-table-column>
                        <el-table-column prop="requestMode" label="请求方式"></el-table-column>
                      </el-table>
                    </div>
                  </title-card>
                </div>
              </div>
           </el-col>
      </el-row>
      </div>
  </common-page>
</template>

<script>
import BaseChart from '@/components/EChart/components/BaseChart'
import {
  getAlarmCountByUrl,
} from '@/api/traceabilityReport'
export default {
  name: "index",
  components:{
    BaseChart
  },
  props:{
    uri:[Number, String],
    eventDetails:{
      type:Object,
      default:()=>({})
    },
    accountIp:{
      type:Object,
      default:()=>({})
    },
    interfacePortrait:{
      type:Object,
      default:()=>({})
    }
  },
  data(){
    return{
      columnOption1:{
        dataset:{
          source: [],
        },
        color: ['#E13C3A', '#E69137', '#72C141','#E2BB22','#39A4E1','#E69137'],
        tooltip: { show: true },
        grid: {
          left: 20,
          right: 20,
          bottom: 40,
          top: 20
        },
        legend: {
          show: false
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '75%'],
            center: ['50%', '55%'],
            labelLine: {
              show: false
            },
            label: {
              show: false
            }
          }
        ]
      },
      columnOption2:{
        tooltip: { show: true },
        dataset:{
          source: [],
        },
        grid: {
          left: 70,
          right: 20,
          bottom: 50,
          top: 20
        },
        xAxis:{
          show: true,
          type:'category',
          axisLine: {
            show: true
          },// 坐标轴线
          axisLabel: {
            interval:0
          }
        }, axisTick: {
          show: false
        },// 坐标轴刻度
        yAxis: {
          type: 'value',
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          },// 坐标轴刻度
          axisLabel: {
            show: true
          },// 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series:[
          {
            type:'bar',
            barWidth: 25
          }
        ]
      },
      columnOption3: {
        legend: {
          show: false
        },
        series: [
          {
            type: 'graph',
            name: '',
            legendHoverLink: false,
            layout: 'force',
            zoom: 0.1,
            symbol: 'circle',
            data: [],
            links: [],
            categories: [],
            roam: true,
            force: {
              repulsion: 1000,
              gravity: 0.02,
              edgeLength:400,
              layoutAnimation: true
            },
            draggable: false,
            label: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: '#909399'
            },
            labelLayout: {
              hideOverlap: true
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            },
            animation: true
          }
        ]

      },
      option:[]
    }
  },
  methods:{
    backTask(){
      this.$emit("traceabilityTaskReport")
    },
    traceabilityReport(){
      //事件画像
      let logquery=this.uri
      getAlarmCountByUrl({logquery:logquery}).then((res)=>{
        console.log(res)
        if(res && res.code === 200) {
          let list = Object.keys(res.data).reduce((r, c) => {
            r.push({
              label: c,
              value: res.data[c]
            })
            return r
          }, [])
          console.log(list)
          this.columnOption2.dataset.source=list.reduce((r,c)=>{
              r.push({
                'label':c.label,
                '数量':c.value,
              })
            return r
          },[])
        }else{
          this.columnOption2.dataset.source=[]
        }
      })
      //事件明细列表
      // console.log(this.eventDetails)
      this.option=this.eventDetails[this.uri]
      //账号IP画像
      // console.log(this.accountIp)
      this.columnOption1.dataset.source=this.accountIp[this.uri].reduce((r,c) =>{
        r.push({
          '源IP':c.name,
          'value':c.value
        })
        return r
      },[])
      //接口画像
      // console.log(this.interfacePortrait)
      this.columnOption3.series[0].data=this.interfacePortrait[this.uri].nodes.reduce((r,c)=>{
        r.push({
          id: c.id,
          name: c.name,
          category: c.category,
          symbolSize:parseInt(c.symbolSize) * 4,
        })
        return r
      },[])
      this.columnOption3.series[0].links=this.interfacePortrait[this.uri].links
      this.columnOption3.series[0].categories=this.interfacePortrait[this.uri].categories
      console.log('====>',this.columnOption3.series)
    }
  },
  mounted() {
    this.traceabilityReport()
  }
}
</script>

<style scoped lang="scss">
  .traceabilityReport-wrap{
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
      background-color: #eee;

    .row-division-18 {
      height: 12px;
      width: 100%;
    }
    .common-column-wrap{
      width: 100%;
      box-sizing: border-box;

      .common-block-wrap{
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        position: relative;
        border-radius: 5px;
        overflow: hidden;
        .chart-inside-wrap{
          height: 100%;

        }
      }
      .top-relation-wrap{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
    }
    .el-table{
      height: 100%;
      margin-top: 0;
    }
    }
    .column-divided{
      width: 100%;
      height: 12px;
    }

//图表
    .top{
      height: 500px;
    }
    .chart{
      height: 300px;
    }

</style>
